<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="jquery.min.js"></script>
    <link rel="stylesheet" href="../插件组件包/全屏滚动/css/jquery.fsscroll.css">
    <title>全屏滚动</title>
    <style>
        * {
          padding: 0;
          margin: 0;
        }
        html, body {
          height: 100%;
          /* overflow: hidden; */
          font-family: Arial,"Microsoft YaHei",sans-serif;
          -webkit-font-smoothing: antialiased;
        }
        .container, .sections, .section {
          position: relative;
          height: 100%;
          text-align: center;
          color: #fff;
        }
        /* 文字相对于每个块级绝对定位 文字水平垂直居中 */
        .section h1 {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);/* 以元素本身的位置为参照，往上(y轴)，往左(x轴)，移动元素自身长宽的-50%，即向右向下移动自己的一半，使元素居中 */
          font-size: 40px;
          transition: all 10s ease;/* 所有动画效果的动作时间为0.3s  ease表示快启动，慢停止*/
        }
        .section:first-child h1 {
          animation: first-show .3s;
        }
        .section0 {
          background: #409EFF;
        }
        .section1{
          background: #67C23A;
        }
        .section2 {
          background: #E6A23C;
        }
        .section3 {
          background: #F56C6C;
        }
        .section h1.text-animate {
          /* 文本动画 */
          left: 0px;
          transform: translateX(-100%);
        }
        @keyframes first-show {
            /* from{}to{}  left从0到50%， */
          0% {
            left: 0px;
            transform: translateX(-100%);
          }
          100% {
            left: 50%;
            transform: translateX(-50%);
          }
        }

    </style>
</head>
<body>
    <!-- 全屏滚动：整个屏幕一页一页整体地滚动 fullpage.js插件
        https://github.com/alvarotrigo/fullPage.js
        中文翻译网站：http://www.dowebok.com/demo/2014/77/--> 


        <div class="container" data-fs-scroll>
            <div class="sections">
                <div class="section section0">
                    <header class="htmleaf-header">
                        <h2>jquery的全屏轮播插件jquery-fsscroll <span>Horizontal & Vertical</span></h2>
                        <div class="htmleaf-links">
                            <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
                            <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201904255624.html" title="返回下载页" target="_blank"><span>返回下载页</span></a>
                        </div>
                    </header>
                    <h1>fsScroll, 一款基于jQuery的全轮播放插件，它具有轻便，够用，高扩展性的特点</h1>
                </div>
                <div class="section section1">
                    <h1>可用于产品轮播导航，个人信息展示等场景</h1>
                </div>
                <div class="section section2">
                    <h1>让你的产品展示更加酷炫，加入让人善心悦目的动画效果吧</h1>
                </div>
                <div class="section section3">
                    <h1>……^_^</h1>
                </div>
            </div>
        </div>


            <script src="../插件组件包/全屏滚动/js/jquery.fsscroll.js"></script>
            <script>
                $(function(){
                    $('.container').fsScroll({

                      beforeScroll: function(el, index) {
                        el.find('h1').addClass('text-animate');
                      },

                      afterScroll: function(el, index) {
                        el.find('h1').removeClass('text-animate');
                      },
                    });

                    // $('.container').fsscroll({
                    //     sectionsColor: ['#1bbc9b','#4BBFC3','#7BAABE','#f90'],
                    // })

                })
              
            </script>
            

</body>
</html>